<template>
  <nav>
    <span class="city" @click="cityClick">{{ cn }}</span>
    <ul>
      <!-- <li class="active">热映</li>
      <li>影院</li>
      <li>待映</li>
      <li>经典电影</li> -->

      <RouterLink
        v-for="(item, i) in tabList"
        :key="item.id"
        :to="item.path"
        class="li"
      >
        {{ item.title }}
      </RouterLink>
    </ul>
    <article @click="search">
      <span class="iconfont icon-fangdajing"></span>
    </article>
  </nav>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      tabList: [
        {
          id: 1,
          title: "热映",
          path: "/home/movies/hot",
        },
        {
          id: 2,
          title: "影院",
          path: "/home/movies/cinema",
        },
        {
          id: 3,
          title: "待映",
          path: "/home/movies/wait",
        },
        {
          id: 4,
          title: "经典电影",
          path: "/home/movies/classic",
        },
      ],
      activeIndex: 0,
    };
  },
  methods: {
    cityClick() {
      // console.log("你点击了城市");
      this.$router.push("/city");
    },
    search() {
      console.log("你点击了放大镜");
    },
    tabClick(i) {
      this.activeIndex = i;
    },
  },
  // computed: {
  //   cn() {
  //     return this.$store.state.cityName;
  //   },
  // },
  computed: mapState({
    cn: "cityName",
  }),
};
</script>

<style lang="less" scoped>
nav {
  width: 375px;
  height: 46px;
  border-bottom: 1px solid @border-color;
  display: flex;
  font-size: 15px;
  background-color: #fff;

  .city {
    width: 62px;
    .center();
  }

  ul {
    display: flex;
    flex: 1;
    font-weight: 900;
    margin: 0 10px;

    .li {
      flex: 2;
      .center();
      position: relative;

      &:last-child {
        flex: 3;
      }
    }

    .router-link-active::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 5px;
      width: 20px;
      height: 4px;
      background-color: @theme-color;
      border-radius: 2px;
    }

    // li:last-child {
    //   flex: 3;
    // }
  }

  article {
    width: 45px;
    .center();

    .iconfont {
      font-size: @xxl-font;
      color: @theme-color;
    }
  }
}
</style>
